<template>
  <el-date-picker
    v-model="currentValue"
    :type="type"
    :value-format="valueFormat"
    :picker-options="pickerOptions"
    :style="{width: width + 'px'}"
    @change="onChange"
  />
</template>

<script>
import { remoteDate } from '@/api/common/common'
export default {
  name: 'DateRangePicker',
  props: {
    value: {
      type: String,
      default: ''
    },
    width: {
      type: [String, Number],
      default: 140
    },
    // 日期类型
    type: {
      type: String,
      default: 'date'
    },
    // 日期格式
    valueFormat: {
      type: String,
      default: 'yyyy-MM-dd HH:mm:ss'
    },
    // 设置日期可选那范围
    pickerOptions: {
      type: Object,
      default: () => {
        return null
      }
    }
  },
  data() {
    return {
      // value: ''
    }
  },
  computed: {
    currentValue: {
      get() {
        return this.value
      },
      set(val) {
        if (!this.$dayJs(val).isValid()) {
          this.$emit('input', '')
          return false
        }
        const date = `${this.$dayJs(val).format('YYYY-MM-DD')} ${this.$dayJs().hour()}:${this.$dayJs().minute()}:${this.$dayJs().second()}`
        this.$emit('input', this.$dayJs(date).format('YYYY-MM-DD HH:mm:ss'))
      }
    }
  },
  created() {
    this.remoteDate()
  },
  methods: {
    onChange(val) {
      const date = `${this.$dayJs(val).format('YYYY-MM-DD')} ${this.$dayJs().hour()}:${this.$dayJs().minute()}:${this.$dayJs().second()}`
      this.$emit('change', this.$dayJs(date).format('YYYY-MM-DD HH:mm:ss'))
    },
    remoteDate() {
      remoteDate().then(res => {
        if (res.code === 20000) {
          this.currentValue = this.$dayJs(res.data).format('YYYY-MM-DD HH:mm:ss')
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
